<template>
    <div class="complaint-add">
        <el-form :model="complaintForm" :rules="rules" ref="complaintForm" label-width="100px" class="complaint-form">
            <h3>添加投诉信息</h3>
            <el-form-item label="车辆品牌" prop="brandId">
                <el-select v-model="complaintForm.brandId" placeholder="请选择品牌">
                    <el-option
                        v-for="brand in brands"
                        :key="brand.id"
                        :label="brand.name"
                        :value="brand.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车型" prop="carType">
                <el-input v-model="complaintForm.carType" placeholder="请输入车型"></el-input>
            </el-form-item>
            <el-form-item label="投诉描述" prop="problem">
                <el-input type="textarea" v-model="complaintForm.problem" :rows="4"
                    placeholder="请详细描述您的投诉内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="$router.push('/complaint/list')">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'ComplaintAdd',
    data() {
        return {
            complaintForm: {
                brandId: '',
                carType: '',
                problem: ''
            },
            brands: [],  // 添加品牌列表数据
            rules: {
                brandId: [
                    { required: true, message: '请输入品牌ID', trigger: 'blur' }
                ],
                carType: [
                    { required: true, message: '请输入车型', trigger: 'blur' }
                ],
                problem: [
                    { required: true, message: '请输入投诉描述', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getBrands()  // 组件创建时获取品牌列表
    },
    methods: {
        async getBrands() {
            try {
                const response = await this.$axios({
                    method: 'get',
                    url: '/car/api/brands',
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`
                    }
                });
                if (response.data.code === 0) {
                    this.brands = response.data.data;
                }
            } catch (error) {
                console.error('获取品牌列表失败:', error);
                this.$message.error('获取品牌列表失败');
            }
        },
        submitForm() {
            this.$refs.complaintForm.validate(async valid => {
                if (valid) {
                    try {
                        const response = await this.$axios({
                            method: 'post',
                            url: '/car/api/add',
                            headers: {
                                'Authorization': `Bearer ${localStorage.getItem('token')}`
                            },
                            data: this.complaintForm
                        });
                        
                        if (response.data.code === 0) {
                            this.$message.success('投诉提交成功');
                            this.$router.push('/complaint/list');
                        } else {
                            this.$message.error(response.data.msg || '投诉提交失败');
                        }
                    } catch (error) {
                        console.error('投诉提交失败:', error);
                        this.$message.error('投诉提交失败');
                    }
                }
            });
        },
        resetForm() {
            this.$refs.complaintForm.resetFields();
        }
    }
}
</script>

<style scoped>
.complaint-add {
    padding: 20px;
}

.complaint-form {
    max-width: 600px;
    margin: 0 auto;
}

h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #303133;
}
</style>